<template>
  <!--参数取值必须在标签内。不能单独在template内-->
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
        <el-button style="float: none; padding: 3px 0" type="text" v-on:click="baseadd()">录入信息</el-button>
        <el-button style="float: none; padding: 3px 0" type="text" v-on:click="basechange()">修改保存</el-button>
      </div>
      <div class="text item">
        {{'学号：'+userform.id}}
      </div>
      <div class="text item">
        {{'姓名：'}}<el-input style="width:140px" v-model="userform.sname" ></el-input>
      </div>
      <div class="text item">
        {{'性别：'}}  <el-input style="width:140px" v-model="userform.gender" ></el-input>
      </div>
      <div class="text item">
        {{'专业：'}}  <el-input style="width:140px" v-model="userform.major" ></el-input>
      </div>
      <div class="text item">
        {{'班级：'}}  <el-input style="width:140px" v-model="userform.sclass" ></el-input>
      </div>
      <div class="text item">
        {{'出生日期：'}}<el-input style="width:140px" v-model="userform.birth_year" ></el-input>{{'年'}}<el-input style="width:140px" v-model="userform.birth_month" ></el-input>{{'月'}}
      </div>
      <div class="text item">
        {{'籍贯：'}}  <el-input style="width:140px" v-model="userform.native_place" ></el-input>
      </div>
      <div class="text item">
        {{'民族：'}}  <el-input style="width:140px" v-model="userform.nation" ></el-input>
      </div>
      <div class="text item">
        {{'政治面貌：'}}  <el-input style="width:140px" v-model="userform.politics_status" ></el-input>
      </div>
      <div class="text item">
        {{'入学时间：'}} <el-input style="width:140px" v-model="userform.enrollment" ></el-input>
      </div>
      <div class="text item">
        {{'辅导员：'}} <el-input style="width:140px" v-model="userform.instructor" ></el-input>
      </div>
      <div class="text item">
        {{'宿舍号：'}} <el-input style="width:140px" v-model="userform.dorm" ></el-input>
      </div>
      <div class="text item">
        {{'联系电话：'}} <el-input style="width:140px" v-model="userform.telephone" ></el-input>
      </div>
      <div class="text item">
        {{'邮箱：'}} <el-input style="width:140px" v-model="userform.mailbox" ></el-input>
      </div>
      <div class="text item">
        {{'家庭住址：'}} <el-input style="width:140px" v-model="userform.live_place" ></el-input>
      </div>
    </el-card>
  </div>
</template>

<script>
import { basequery } from "@/api/basequery.js";
import conf from "@/utils/config.js";
const { token } = conf;
export default {
  name: "UserProfile",
  props:['id'],
  data() {
    return {
        userform:{        id:'',
                          sclass:"",
                          sname: '',
                          gender:"",
                          major:"",
                          instructor:"",
                          dorm:"",
                          telephone:"",
                          nation:"",
                          politics_status:"",
                          birth_year:"",
                          birth_month:"",
                          native_place:"",
                          live_place:"",
                          mailbox:"",
                          enrollment:""},
    }

  },
  mounted:function(){
     basequery(this.id)
              .then((res) => {
                             console.log(res);
                            //返回值格式 {"age":1,"id":1,"name":"zxc"}  注意 不是{fname:"John",lname:"Doe",age:25}这种格式
                            var jsonObj = eval('('+res.request.response +')');
                            this.userform=jsonObj.students[0];
                          })
              .catch((err) => {
                            this.$notify.error({
                              title: "错误",
                              message: "服务器内部错误",
                            });
                          });
  },
  methods: {
    show() {
      console.log(this.$route.params.id)
    },
    basechange(){
    var url='/student/change';
    this.$http.put(url,this.userform).then((res) =>{
            console.log(res);
            var jsonObject = res.data;
            if(jsonObject.code==200){
             this.$notify.success({
                              title: "提示",
                              message: jsonObject.message,
                            });
            }
            else if(jsonObject.code==400){
            this.$notify.error({
                               title: "提示",
                               message: jsonObject.message,
                            });
            }
        })
        .catch((err) => {
                      this.$notify.error({
                        title: "错误",
                        message: "服务器内部错误",
                      });
                    });
    },
    baseadd(){
       var url='/student/add';
       this.$http.post(url,this.userform).then((res) =>{
                   console.log(res);
                   var jsonObject = res.data;
                   if(jsonObject.code==200){
                    this.$notify.success({
                                     title: "提示",
                                     message: jsonObject.message,
                                   });
                   }
                   else if(jsonObject.code==400){
                   this.$notify.error({
                                      title: "提示",
                                      message: jsonObject.message,
                                   });
                   }
               })
               .catch((err) => {
                             this.$notify.error({
                               title: "错误",
                               message: "服务器内部错误",
                             });
                           });
    }
  }
}
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>
